﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MapFieldsControl.ascx.cs"
    Inherits="ImportExamResultApplication.Controls.MapFieldsControl" %>
<div id="popupMapField" class="popup">
    <div class="select">
        <div>
            <ul class="move-item" data-bind="foreach: myItems">
                <li data-bind="attr: { 'class': selectedClass }, event: { click: $parent.clickItems, dblclick: $parent.next }">
                    <span data-bind="text: name"></span></li>
            </ul>
        </div>
        <div>
            <ul class="move-item caption" data-bind="foreach: myCaptions">
                <li><span data-bind="text: name"></span></li>
            </ul>
        </div>
        <div>
            <ul class="move-item" data-bind="foreach: mySelectedItems">
                <li data-bind="attr: { 'class': selectedClass }, event: { click: $parent.clickSelectedItems, dblclick: $parent.back }">
                    <span data-bind="text: name"></span></li>
            </ul>
        </div>
    </div>
    <div class="button">
        <input type="button" value="OK" data-bind="event: { click: done }" />
        <input type="button" value="Cancel" data-bind="event: { click: close }" />
    </div>
</div>
<script type="text/javascript">

    var mapped = false;

    function moveItem(listA, listB, item) {
        var flag = false;
        $.each(listB, function () {
            if (flag) {
                this.selectedClass('selected');
                return false;
            }
            if (this.selectedClass() === 'selected') {
                this.name(item.name());
                this.selectedClass('');
                flag = true;
                listA.remove(item);
            }
        });
    }

    function saveColumnNames(param) {
        alert(JSON.stringify(param));
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(param),
            dataType: "json",
            url: "/Default.aspx/SaveColumns",
            success: function (msg) {
                alert(1);
            },
            error: function (xmlHttpRequest) {
                var err = eval("(" + xmlHttpRequest.responseText + ")");
                alert(message + err.Message);
            }
        });
    }

    function loadColumnNames() {

        var button = this;

        if (!mapped) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Default.aspx/GetTableColumns",
                success: function (msg) {

                    var vm = {
                        myItems: ko.observableArray([]),
                        mySelectedItems: ko.observableArray([]),
                        myCaptions: ko.observableArray([]),
                        clickItems: function () {
                            $.each(vm.myItems(), function () {
                                this.selectedClass('');
                            });
                            this.selectedClass('selected');
                        },
                        clickSelectedItems: function () {
                            $.each(vm.mySelectedItems(), function () {
                                this.selectedClass('');
                            });
                            this.selectedClass('selected');
                        },
                        next: function () {
                            moveItem(vm.myItems, vm.mySelectedItems(), this);
                        },
                        back: function () {
                            if (this.name() !== '') {
                                $.each(vm.myItems(), function () {
                                    this.selectedClass('');
                                });
                                vm.myItems.push({ name: ko.observable(this.name()), id: this.name(), disable: ko.observable(false), selectedClass: ko.observable('') });
                                this.name('');
                            }
                        },
                        done: function () {
                            var param = { list: [] };
                            $.each(vm.mySelectedItems(), function () {
                                var template = { };
                                template.key = this.id;
                                template.value =  this.name();
                                param.list.push(template);
                            });
                            saveColumnNames(param);
                            $(".modalOverlay").remove();
                            $('#popupMapField').slideUp('slow');
                        },
                        close: function () {
                            $(".modalOverlay").remove();
                            $('#popupMapField').slideUp('slow');
                        }
                    };

                    $.each(msg.d.Items, function () {
                        vm.myItems.push({ name: ko.observable(this.value), id: this.key, disable: ko.observable(false), selectedClass: ko.observable('') });
                    });
                    $.each(msg.d.SelectedItems, function () {
                        vm.myCaptions.push({ name: this.caption, id: this.key, disable: ko.observable(false), selectedClass: ko.observable('') });
                        vm.mySelectedItems.push({ name: ko.observable(this.value), id: this.key, disable: ko.observable(false), selectedClass: ko.observable('') });
                    });

                    ko.applyBindings(vm);
                }
            });

            mapped = true;
        }

        $("body").append('<div class="modalOverlay">');
        $('#popupMapField').slideDown('slow');
    }
</script>
